<template>
	<div>
		<el-upload
			class="upload-demo"
			action=""
			:auto-upload="false"
			:accept="accept"
			:on-preview="handlePreview"
			:on-change="handleChange"
			:on-remove="handleRemove"
			:before-remove="beforeRemove"
			:multiple="multiple"
			:limit="limit"
			:on-exceed="handleExceed"
			:before-upload="beforeAvatarUpload"
			:file-list="fileList"
		>
			<el-button size="small" type="primary" :style="{ width: btnWidth }">上传文件</el-button>
			<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
		</el-upload>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getCookies } from '@/utils/auth'
	export default {
		props: {
			defaultFileList: {
				default: () => [],
				type: Array
			},
			limit: {
				type: Number,
				default: 1
			},

			multiple: {
				type: Boolean,
				default: false
			},
			accept: {
				type: String,
				default: ''
			},
			uploadTip: {
				type: String,
				default: ''
			},
			dataJson: {
				type: Object
			},
			btnWidth: {
				type: String,
				default: '336px'
			},
			fileData: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				fileList: [],
				formData: {}
			}
		},
		computed: {
			...mapGetters(['token'])
		},
		watch: {
			defaultFileList: {
				handler(newval, oldval) {
					this.fileList = JSON.parse(JSON.stringify(this.defaultFileList))
				},
				immediate: true
			}
		},
		methods: {
			handleChange(file, fileList) {
				this.fileList = fileList
				this.$emit('changeUpFile', fileList)
			},
			// 确认删除
			handleRemove(file, fileList) {
				const that = this
				that.$emit('changeUpFile', fileList)
			},
			handlePreview(file) {
				console.log(file)
			},
			handleExceed(files, fileList) {
				console.log(files)
				console.log(fileList)
				this.$message.warning(`仅可以上传${fileList.length}个文件`)
				// this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${file.name}？`)
			},
			beforeAvatarUpload(file) {
				console.log(file)
				const isLt2M = file.size / 1024 / 1024 < 100
				if (!isLt2M) {
					this.$message.error('上传文件大小不能超过 100MB!')
				}
				return isLt2M
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.el-upload {
			width: 100%;
		}
	}
</style>
